<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div>
            <!-- 单个checkbox 使用 checked property 和 change 事件； -->
            <h2>单个复选框</h2>
            <p> 
                复选框:<br>
                <input type="checkbox" v-model="isChecked">
            </p>
            <p>isChecked:{{isChecked}}</p>
            <p><button @click="isChecked=false">修改isChecked</button></p>
        </div>

        <div>
            <!-- 单个checkbox 也可以和value值绑定 -->
            <h2>单个复选框(值绑定)</h2>
            <p> 
                复选框:<br>
                <!-- 静态属性 => 属性值字符串 -->
                <input type="checkbox" true-value="agree" false-value="disagree" v-model="isAgree">
                <!-- 动态属性 => 属性值布尔值 true / false -->
                <!-- <input type="checkbox" :true-value="true" :false-value="false" v-model="isAgree"> -->
            </p>
            <p>isAgree:{{isAgree}}</p>
            <p v-if="isAgree!=null">类型:{{typeof isAgree}}</p>
            <p><button @click="isAgree=false">修改isAgree</button></p>
        </div>

        <div>
            <h2>下拉框</h2>

             <!-- 内联对象字面量(动态绑定) -->
            <select v-model="obj">
                <option value="">请选择等级</option>
                <option :value="{level:4}">A</option>
                <option :value="{level:3}">B</option>
                <option :value="{level:2}">C</option>
                <option :value="{level:1}">D</option>
            </select>
            <p>obj:{{obj}}</p>
            <p>level:{{obj.level}}</p>
            <p><button @click="obj.level='4'">修改level</button></p>
        </div>
      

        
    </div>

</body>
<script>
    // v-model 双向数据绑定  => a. 数据发生变化,会更新视图  b. 修改视图中的内容 数据也会更新
    // v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
    // 但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

    // v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
    // text 和 textarea 元素使用 value property 和 input 事件；
    // checkbox 和 radio 使用 checked property 和 change 事件；
    // select 字段将 value 作为 prop 并将 change 作为事件。

    var vm = new Vue({
        el:"#app",
        data:{
            isChecked:false,
            isAgree:null,
            obj:{
                level:4,
            },
        }
    });



</script>
</html>